<!DOCTYPE html>
<html lang="en">
<head>
    <title>地图导航</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style rel="stylesheet" type="text/css">
        /*去除正文区域的内外间距：全屏*/
        body{ margin:0 auto; padding:0;}
        /*地图加载容器的大小*/
        #container{
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
<!--
            这里的html是鸿蒙web组件嵌入使用的。
            web组件不是浏览器，不能完美支持js脚本的弹窗。
            需要弹窗，也要传递给鸿蒙来处理。
        -->

<!--地图呈现容器-->
<div id="container"></div>

<!--设置全局变量-->
<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "ff325ae6ef0f6f15b093ca108dcd1f3b",
    };
</script>

<!--加载官方地图脚本：请附加申请的key-->
<script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=8b1820aca997afe7bb6353d08be8a023"
></script>

<!--自己的脚本-->
<script type="text/javascript">

    //>>>>这里的代码默认执行
    //创建地图对象，进行初始化
    var map = new AMap.Map(
        "container",                         //加载显示的容器
        {
            zoom: 18,                        //初始缩放比例
            center: [121.474805,31.237220]  //初始中心点: [经度, 维度]
        }
    );

    //【方法】：设置定位
    function setLocation(lon, lat) {

        //重新设置地图的中心点
        map.setZoomAndCenter(20, [lon,lat]);

        //设置当前中心点的标记
        var marker = new AMap.Marker({
            map,
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
            position: [lon,lat]
        });
        //加入到地图中
        map.add(marker);

        //地图新增插件能力：搜索
        map.plugin(['AMap.PlaceSearch'], function(){

            //创建搜索功能对象，提供搜索的配置
            var MSearch = new AMap.PlaceSearch({
                map,                //对应的地图
                pageSize: 4,        //每页条数
                pageIndex: 1,       //页数
                extensions: "base"  //扩展：基本信息
            })

            //为地图设置监听：搜索结果处理
            AMap.Event.addListener(MSearch, "complete", (res)=>{
                //调用鸿蒙方法，传回搜索结果
                //网页中的网络传递，只能是字符串string
                //只传递地址列表的数组的字符串给鸿蒙就可以了
                window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
            })

            //执行搜索：自动标记
            MSearch.searchNearBy("停车场", [lon,lat])
        });
    }


    //当页面正式加载完毕
    window.onload = function(){
        //调用鸿蒙端，代理注册过来的函数
        window.traffic.setCurrentLocation()
    }


</script>
</body>
</html>

